<script setup>
import { onMounted } from 'vue'
import { reactive, ref } from 'vue'
import { getProvinceCityAreaAPI } from '@/services/orderManager'
const formRef = ref()

// 表单数据
const formState = reactive({
  // 订单编号
  id: '',
  // 订单状态
  status: '',
  // 付费状态
  paymentStatus: '',
  // 发件人姓名
  senderName: '',
  // 发件人电话
  senderPhone: '',
  // 发件人地址
  senderAddress: '',
  // 收件人姓名
  receiverName: '',
  // 收件人电话
  receiverPhone: '',
  // 收件人地址
  receiverAddress: '',
})

// 订单状态 - 下拉框数据
const statusOptions = [
  {
    value: '22000',
    name: '已关闭',
  },
  {
    value: '23000',
    name: '待取件',
  },
  {
    value: '23001',
    name: '已取件',
  },
  {
    value: '23002',
    name: '网点自寄',
  },
  {
    value: '23003',
    name: '网点入口',
  },
  {
    value: '23009',
    name: '已签收',
  },
]

// 付费状态 - 下拉框数据
const paymentStatusOptions = [
  {
    value: '1',
    name: '未付',
  },
  {
    value: '2',
    name: '已付',
  },
]
const senderAddressOptions = ref([])
const receiverAddressOptions = ref([])
const getPcaData = async () => {
  // 省数据
  const res = await getProvinceCityAreaAPI()
  // 发件人地址 - 下拉框数据
  console.log(res)
  senderAddressOptions.value = res.data
  receiverAddressOptions.value = res.data
}
onMounted(() => {
  getPcaData()
})

// 收件人地址 - 下拉框数据
// const receiverAddressOptions = []
defineProps({
  /** 页码 */
  page: {
    type: Number,
    default: 1,
  },
  /** 页容量 */
  pageSize: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['init', 'finish', 'reset', 'update:page', 'update:pageSize'])
// 点击搜索按钮
const onFinish = async () => {
  // 重置页码
  emit('update:page', 1)
  // 重新获取数据
  emit('finish', formState)
}

// 表单初始化
onMounted(() => {
  emit('init', formState)
})

// 重置表单
const onReset = async () => {
  // 重置页码和页容量
  emit('update:page', 1)
  emit('update:pageSize', 10)
  // 重置表单后，重新获取数据
  await formRef.value.resetFields()
  emit('reset', formState)
}
</script>

<template>
  <a-form ref="formRef" :model="formState" @finish="onFinish">
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item label="订单编号" :name="'id'">
          <a-input allow-clear v-model:value="formState.id" placeholder="请输入订单编号"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="订单状态" :name="'status'">
          <a-select v-model:value="formState.status" allowClear placeholder="请选择">
            <a-select-option v-for="item in statusOptions" :key="item.value" :value="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="付费状态" :name="'paymentStatus'">
          <a-select v-model:value="formState.paymentStatus" allowClear placeholder="请选择">
            <a-select-option
              v-for="item in paymentStatusOptions"
              :key="item.value"
              :value="item.value"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="发件人姓名" :name="'senderName'">
          <a-input
            allow-clear
            v-model:value="formState.senderName"
            placeholder="请输入发件人姓名"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="发件人电话" :name="'name'">
          <a-input
            allow-clear
            v-model:value="formState.name"
            placeholder="请输入发件人电话"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="发件人地址" :name="'senderAddress'">
          <!-- 省 -->
          <a-select
            v-model:value="formState.senderAddress"
            allowClear
            placeholder="请选择"
            :style="{ width: '80px' }"
          >
            <a-select-option v-for="item in senderAddressOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <!-- 市 -->
          <a-select
            v-model:value="senderAddressOptions"
            allowClear
            placeholder="请选择"
            :style="{ width: '80px' }"
          >
            <a-select-option v-for="item in senderAddressOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <!-- 区 -->
          <a-select
            v-model:value="senderAddressOptions"
            allowClear
            placeholder="请选择"
            :style="{ width: '80px' }"
          >
            <a-select-option v-for="item in senderAddressOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="收件人姓名" :name="'receiverName'">
          <a-input
            allow-clear
            v-model:value="formState.receiverName"
            placeholder="请输入收件人姓名"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="收件人电话" :name="'receiverPhone'">
          <a-input
            allow-clear
            v-model:value="formState.receiverPhone"
            placeholder="请输入收件人地址"
          ></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item label="收件人地址" :name="'receiverAddress'">
          <!-- 省 -->
          <a-select
            v-model:value="formState.receiverAddress"
            allowClear
            placeholder="请选择"
            :style="{ width: '80px' }"
          >
            <a-select-option v-for="item in receiverAddressOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <!-- 市 -->
          <a-select
            v-model:value="receiverAddressOptions"
            allowClear
            placeholder="请选择"
            :style="{ width: '80px' }"
          >
            <a-select-option v-for="item in receiverAddressOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <!-- 区 -->
          <a-select
            v-model:value="receiverAddressOptions"
            allowClear
            placeholder="请选择"
            :style="{ width: '80px' }"
          >
            <a-select-option v-for="item in receiverAddressOptions" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-space>
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button @click="onReset">重置</a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-form>
</template>
